<template>
  <b-container fluid>
    <ValidationObserver v-slot="{ handleSubmit }">
      <form @submit.prevent="handleSubmit(onSubmit)">
        <b-row>
          <b-col lg="3">
            <iq-card>
              <template v-slot:headerTitle>
                <h4 class="card-title">添加新用户</h4>
              </template>
              <template v-slot:body>
                <b-form-group>
                  <div class="add-img-user profile-img-edit">
                    <b-img
                      class="profile-pic height-150 width-150"
                      fluid
                      :src="user.profile_image"
                      alt="profile-pic"
                    />
                    <input type="hidden" v-model="user.profile_image" />
                    <div class="p-image">
                      <b-button
                        variant="none"
                        class="upload-button iq-bg-primary position-relative"
                      >
                        <input
                          type="file"
                          @change="previewImage"
                          class="h-100 position-absolute"
                          accept="image/*"
                          style="opacity: 0;"
                        />
                        File Upload
                      </b-button>
                    </div>
                  </div>
                  <div class="img-extension mt-3">
                    <div class="d-inline-block align-items-center">
                      <span>Only</span>
                      <b-link href="javascript:void();">.jpg</b-link>
                      <b-link href="javascript:void();">.png</b-link>
                      <b-link href="javascript:void();">.jpeg</b-link>
                      <span>allowed</span>
                    </div>
                  </div>
                </b-form-group>
                <b-form-group label="用户说明:" label-for="user-remark">
                  <ValidationProvider name="用户说明" rules="minmax:0,80" v-slot="{ errors }">
                    <b-form-textarea
                      id="user-remark"
                      rows="4"
                      placeholder="User Remark"
                      v-model.trim="user.remark"
                      :class="(errors.length > 0 ? ' is-invalid' : '')"
                    ></b-form-textarea>
                    <div class="invalid-feedback">
                      <span>{{ errors[0] }}</span>
                    </div>
                  </ValidationProvider>
                </b-form-group>
              </template>
            </iq-card>
          </b-col>
          <b-col lg="9">
            <iq-card>
              <template v-slot:headerTitle>
                <h4 class="card-title">新增用户信息</h4>
              </template>
              <template v-slot:body>
                <div class="new-user-info">
                  <b-row>
                    <b-form-group class="col-md-6" label="登录账号:" label-for="username">
                      <ValidationProvider name="登录名" rules="required|isAccount" v-slot="{ errors }">
                        <b-form-input
                          id="username"
                          type="text"
                          placeholder="User Name"
                          v-model.trim="user.username"
                          :class="(errors.length > 0 ? ' is-invalid' : '')"
                        ></b-form-input>
                        <div class="invalid-feedback">
                          <span>{{ errors[0] }}</span>
                        </div>
                      </ValidationProvider>
                    </b-form-group>
                    <b-form-group class="col-md-6" label="真实姓名:" label-for="realname">
                      <ValidationProvider
                        name="真实姓名"
                        rules="required|isChineseName"
                        v-slot="{ errors }"
                      >
                        <b-form-input
                          id="realname"
                          type="text"
                          placeholder="Real Name"
                          v-model.trim="user.realname"
                          :class="(errors.length > 0 ? ' is-invalid' : '')"
                        ></b-form-input>
                        <div class="invalid-feedback">
                          <span>{{ errors[0] }}</span>
                        </div>
                      </ValidationProvider>
                    </b-form-group>
                    <b-form-group class="col-md-6" label="生日:" label-for="birthday">
                      <b-form-input
                        id="birthday"
                        type="date"
                        v-model="user.birthday"
                        placeholder="Birthday"
                      ></b-form-input>
                    </b-form-group>
                    <b-form-group class="col-md-6" label="邮箱:" label-for="email">
                      <ValidationProvider name="Email" rules="required|email" v-slot="{ errors }">
                        <b-form-input
                          id="email"
                          type="text"
                          placeholder="Email"
                          v-model.trim="user.email"
                          :class="(errors.length > 0 ? ' is-invalid' : '')"
                        ></b-form-input>
                        <div class="invalid-feedback">
                          <span>{{ errors[0] }}</span>
                        </div>
                      </ValidationProvider>
                    </b-form-group>
                    <b-form-group class="col-md-6" label="手机号码:" label-for="phone">
                      <ValidationProvider name="手机号码" rules="required|isPhone" v-slot="{ errors }">
                        <b-form-input
                          id="phone"
                          type="text"
                          placeholder="Phone Number"
                          v-model.trim="user.phone"
                          :class="(errors.length > 0 ? ' is-invalid' : '')"
                        ></b-form-input>
                        <div class="invalid-feedback">
                          <span>{{ errors[0] }}</span>
                        </div>
                      </ValidationProvider>
                    </b-form-group>
                    <b-form-group class="col-md-6" label="地址:" label-for="address">
                      <b-form-input
                        id="address"
                        type="text"
                        v-model.trim="user.address"
                        placeholder="Adress"
                      ></b-form-input>
                    </b-form-group>
                    <b-form-group class="col-md-6" label="性别:" label-for="gender">
                      <b-form-select
                        plain
                        ref="bSelect"
                        v-model="user.gender"
                        :options="genders"
                        id="gender"
                      ></b-form-select>
                    </b-form-group>
                    <b-form-group class="col-md-6" label="User Role:" label-for="selectuserrole">
                      <b-form-select
                        plain
                        v-model.trim="user.role"
                        :options="roles"
                        id="selectuserrole"
                      >
                        <template v-slot:first>
                          <b-form-select-option :value="null">Select</b-form-select-option>
                        </template>
                      </b-form-select>
                    </b-form-group>
                    <b-form-group class="col-md-6" label="密码:" label-for="password">
                      <ValidationProvider
                        name="密码"
                        rules="required|isPassword|confirmed:repeat_password"
                        v-slot="{ errors }"
                      >
                        <b-form-input
                          id="password"
                          type="password"
                          v-model="user.password"
                          placeholder="Password"
                          :class="(errors.length > 0 ? ' is-invalid' : '')"
                        ></b-form-input>
                        <div class="invalid-feedback">
                          <span>{{ errors[0] }}</span>
                        </div>
                      </ValidationProvider>
                    </b-form-group>
                    <b-form-group class="col-md-6" label="再次输入密码:" label-for="rpass">
                      <ValidationProvider
                        vid="repeat_password"
                        name="再次输入密码"
                        rules="required"
                        v-slot="{ errors }"
                      >
                        <b-form-input
                          v-model="user.repeat_password"
                          type="password"
                          placeholder="Repeat Password"
                          :class="(errors.length > 0 ? ' is-invalid' : '')"
                        ></b-form-input>
                        <div class="invalid-feedback">
                          <span>{{ errors[0] }}</span>
                        </div>
                      </ValidationProvider>
                    </b-form-group>
                  </b-row>
                  <b-button variant="primary" type="submit">
                    <i class="ri-user-add-line"></i> 添加用户
                  </b-button>
                </div>
              </template>
            </iq-card>
          </b-col>
        </b-row>
      </form>
    </ValidationObserver>
  </b-container>
</template>
<script>
import { core } from '../../config/pluginInit'
import { mapGetters } from 'vuex'
import request from '@/apis'
export default {
  name: 'AddUser',
  mounted () {
    core.index()
  },
  data () {
    return {
      user: {
        profile_image: require('../../assets/images/user/user-11.png'),
        username: '',
        realname: '',
        birthday: '',
        email: '',
        phone: '',
        address: '',
        gender: '1',
        role: '',
        password: ''
      },
      roles: [
        { text: 'Web Designer', value: 'Web Designer' },
        { text: 'Web Developer', value: 'Web Developer' },
        { text: 'Tester', value: 'Tester' },
        { text: 'Php Developer', value: 'Php Developer' },
        { text: 'Ios Developer', value: 'Ios Developer' }
      ]
    }
  },
  methods: {
    onSubmit () {
      // core.showSnackbar('success', 'User has been updated successfully.')
      request.fetchUserAdd(this.user).then(res => {
        this.$message.success(res.msg)
        this.$router.push('/user/user-list')
      }).catch(err => {
        this.$message.error(err.msg)
      })
    },
    previewImage: function (event) {
      const input = event.target

      if (input.files && input.files[0]) {
        const reader = new FileReader()

        reader.onload = (e) => {
          this.user.profile_image = e.target.result
        }

        reader.readAsDataURL(input.files[0])
      }
    }
  },
  computed: {
    ...mapGetters({ genderState: 'Dict/genderState' }),
    genders () {
      return this.genderState.map(gender => { return { text: gender.dictLabel, value: gender.dictValue } })
    }
  }
}
</script>
